
        *, *:before, *:after {
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        body, ul {
            margin: 0;
            padding: 0;
        }
        body {
            color: #4d4d4d;
            font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
            background: #f5f5f5 url('../image/bg.jpg') no-repeat center;
            background-size: cover;
            font-smoothing: antialiased;
        }
        ul {
            list-style: none;
        }
        .chat {
            margin: 20px auto;
            width: 800px;
        	height: 600px;
        }
        .chat{overflow:hidden;border-radius:3px}
        .chat .main,
        .chat .sidebar{height:100%}
        .chat .sidebar{float:left;width:200px;color:#f4f4f4;background-color:#2e3238}
        .chat .main{position:relative;overflow:hidden;background-color:#eee}
        .chat .m-text{position:absolute;width:100%;bottom:0;left:0}
        .chat .m-message{height:calc(100% - 10pc)}
        .m-card{padding:9pt;border-bottom:1px solid #24272c}
        .m-card .footer{margin-top:25px}
        .m-card .avatar,
        .m-card .name{vertical-align:middle;}
        .m-card .avatar{border-radius:2px}
        .m-card .name{display:inline-block;margin:0 0 0 15px;font-size:1pc}



        .m-message{padding:10px 15px;overflow-y:scroll}
        .m-message li{margin-bottom:15px}
        .m-message .time{margin:7px 0;text-align:center}
        .m-message .time span{display:inline-block;padding:0 18px;font-size:9pt;color:#fff;border-radius:2px;background-color:#dcdcdc}
        .m-message .avatar{float:left;margin:0 10px 0 0;border-radius:3px}
        .m-message .text{
            display:inline-block;
            position:relative;padding:0 10px;
            max-width:calc(100% - 40px);
            min-height:30px;
            line-height:2.5;
            font-size:9pt;
            text-align:left;
            word-break:break-all;
            background-color:#fafafa;
            border-radius:4px}
        .m-message .text:before{
            content:" ";
            position:absolute;
            top:9px;
            right:100%;
            border:6px solid transparent;
            border-right-color:#fafafa
        }
        .m-message .self{
            text-align:right
        }
        .m-message .self .avatar{
            float:right;margin:0 0 0 10px
        }
        .m-message .self .text{
            background-color:#b2e281
        }
        .m-message .self .text:before{
            right:inherit;left:100%;
            border-right-color:transparent;border-left-color:#b2e281
        }

        

        .m-text{
            height:10pc;
            border-top:1px solid #ddd
            }
        .m-text textarea{
            padding:10px;
            height:100%;
            width:100%;
            border:none;
            outline:0;
            font-family:Micrsofot Yahei;
            resize:none
        }
            